<template>
    <div class="header-container">
      <div class="header-left flex-box">
        <el-icon class="icon" size="20" @click="store.commit('collapseMenu')"><Fold /></el-icon>
        <ul class="ul-tag flex-box">
            <li v-for="(item,index) in selectMenu" 
            :key="item.path"
            :class="{selected:route.path === item.path}"
            class="tab flex-box">
            <el-icon class="icon-cancel" size="12"><component :is="item.icon"/></el-icon>
            <router-link class="text flex-box" :to="{path:item.path}">
                {{ item.name }}
            </router-link> 
            <el-icon class="close" size="12" @click="closetab(item,index)"><Close /></el-icon>
            </li>
        </ul>
      </div>
      <div class="header-right">
    <el-dropdown>
        <div class="el-dropdown-link flex-box">
            <el-avatar 
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
            <p class="user-name">admin</p>
        </div>
        <template #dropdown>
        <el-dropdown-menu>
        <el-dropdown-item >退出</el-dropdown-item>
        <!-- <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item> -->
        </el-dropdown-menu>
        </template>
    </el-dropdown>
      </div>
    </div>
</template>
<script setup>
import { computed } from 'vue';
import {useStore} from 'vuex' 
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()
const store=useStore()
const selectMenu= computed(()=> store.state.menu.selectMenu)
// 点击关闭tag
const closetab=(item,index) =>{
    store.commit('closeMenu',item)
    // 删除的非当前页tag
    if(route.path !== item.path){
        return
    }
    const selectMenuData=selectMenu.value
    // 删除最后一项
    if(index === selectMenuData.length){
        // 如果tag只有一个元素
        if(!selectMenuData.length){
            router.push('/')
        }else{
            router.push({
                path:selectMenuData[index-1].path
            })
        }
    }else{//如果删除中间位置tag
        router.push({
            path:selectMenuData[index].path
        })
    }
}
</script>
  
  
<style lang="less" scoped>
.flex-box{
    display: flex;
    align-items: center;
}
.header-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding-right: 25px;
    background-color: #fff;
    .header-left{
        height: 100%;
        margin-left: 0px;
        .icon{
            width: 45px;
            height: 100%;
        }
        .icon:hover{
            background-color:#f5f5f5;
            cursor: pointer;
        }
        .ul-tag{
           background-color: #fff;//#fff
           margin-left: 0px;
           padding:0px ;
           height: 100%;
        }
        .tab{
            transition: none;
            padding-left: 0 10px ;//0 10px
            width: 90px;
            font-size: 10px;
            height: 100%;
            // text-align: center;
            .icon-cancel{
                width: 18px;
                height: 100%;
            }
            .close{
                visibility: hidden; 
            }
            &.selected{
                a{
                    color: #409eff;
                }
                i{
                    color: #409eff;
                }
                background-color: #f5f5f5;
            }
        //     .icon-cancel:hover{
        //     background-color:#fff;
        //     // cursor: pointer;
        //     }
        }
        .tab:hover{
            background-color: #f5f5f5;
            .close{
                visibility: inherit;
                cursor: pointer;
                color: #000;
            }
        }
        .text{
            margin: 0 5px;
        }
       
        
        
    }
    .header-right{
        // width: 100%;错误
        .el-dropdown-link{
            margin-right: -15px;
            .user-name{
                margin-left: 10px;
            }
        }
        .el-dropdown-link:hover{
            background-color: #f5f5f5;
        }
    }
    a{
        height: 100%;
        color: #333;
        font-size: 10px;
        text-decoration: none;
    }
}
</style>
  